<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8" />
		<meta http-equiv="X-UA-Compatible" content="IE=edge" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>Document</title>
		<style>
			.countdown {
				width: 240px;
				height: 305px;
				text-align: center;
				line-height: 1;
				color: #fff;
				background-color: brown;
				/* background-size: 240px; */
				/* float: left; */
				overflow: hidden;
			}

			.countdown .next {
				font-size: 16px;
				margin: 25px 0 14px;
			}

			.countdown .title {
				font-size: 33px;
			}

			.countdown .tips {
				margin-top: 80px;
				font-size: 23px;
			}

			.countdown small {
				font-size: 17px;
			}

			.countdown .clock {
				width: 142px;
				margin: 18px auto 0;
				overflow: hidden;
			}

			.countdown .clock span,
			.countdown .clock i {
				display: block;
				text-align: center;
				line-height: 34px;
				font-size: 23px;
				float: left;
			}

			.countdown .clock span {
				width: 34px;
				height: 34px;
				border-radius: 2px;
				background-color: #303430;
			}

			.countdown .clock i {
				width: 20px;
				font-style: normal;
			}
		</style>
	</head>

	<body>
		<div class="countdown">
			<p class="next">今天是11月21日<span>星期六</span></p>
			<p class="title">下课倒计时</p>
			<p class="clock">
				<span id="hour">00</span>
				<i>:</i>
				<span id="minutes">25</span>
				<i>:</i>
				<span id="scond">20</span>
			</p>
			<p class="tips">11:40:00下课</p>
		</div>
		<script>
			// 做倒计时要有两个时间 未来时间A 现在时间B A-B就是时间差 ，毫秒的差，转成时分秒

			// 随机颜色函数
			// 1. 自定义一个随机颜色函数 #00FF00 rgb(255,255,255)
			// a.style.color = '#FFFF00'  // 三原色 Red Green Blue   0-F 的6位数
			// a.style.color = 'rgb(255,0,0)'  // 三原色 Red Green Blue   rgb(255,0,0)  0-255
			const div = document.querySelector(".countdown");
			// div.style.backgroundColor = 'rgb(0,0,255)'
			// div.style.backgroundColor = '#FF0000'

			function randomColor(flag = true) {
				if (flag) {
					let str = "#"; // 每次随机得到的数值拼到str后面
					// 定义数组，把可选值写到数组，再去用随机的下标取6次数组的值
					const colors = [
						"0",
						"1",
						"2",
						"3",
						"4",
						"5",
						"6",
						"7",
						"8",
						"9",
						"a",
						"b",
						"c",
						"d",
						"e",
						"f",
					];
					// F #F 0 #F0
					for (let i = 0; i < 6; i++) {
						// i 这边是次数 6次
						const n = Math.floor(Math.random() * colors.length); // 随机得到一个数组的下标
						str = str + colors[n];
					}
					// console.log(str);
					return str;
				} else {
					const r = Math.floor(Math.random() * 256);
					const g = Math.floor(Math.random() * 256);
					const b = Math.floor(Math.random() * 256);
					return `rgb(${r},${g},${b})`;
				}
			}

			let date = new Date("2024-11-21 10:55:00");
			// let date = new Date("2024-11-21 10:55:00");
			// 页面刷新随机得到颜色
			// 修改星期
			const days = [
				"星期天",
				"星期一",
				"星期二",
				"星期三",
				"星期四",
				"星期五",
				"星期六"
			];
			document.querySelector(".next span").innerHTML =
				days[date.getDay()];
			// 函数封装 getCountTime
			getCountTime();
			function getCountTime() {
				div.style.backgroundColor = randomColor();
				let date = new Date();
				let last = new Date("2024-11-21 11:40:00");
				let timeDiff = (last.getTime() - date.getTime()) / 1000;
				hour.innerHTML = parseInt(timeDiff / 60 / 60);
				minutes.innerHTML = parseInt(timeDiff / 60);
				scond.innerHTML = parseInt(timeDiff % 60);
			}
			// 让倒计时生效

			setInterval(getCountTime, 1000);
		</script>
	</body>
</html>
